<!DOCTYPE html>
<html lang="en">
<!--当前页面的设置与配置-->
<head>
    <!--标题标签-->
    <title>高德地图导航定位</title>
    <!--解析字符编码-->
    <meta charset="UTF-8" />
    <!--媒体识别：自动响应移动端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--第二步：内联样式-->
    <style rel="stylesheet" type="text/css">
        /*去除正文body自带的内外间距：全屏*/
        body { margin:0; padding:0; }
        /*地图容器的大小*/
        #container { width:100%; height:100vh; }
    </style>
</head>
<!--页面正文-->
<body>
<!--
    前提：
        高德开放平台：https://lbs.amap.com/
        注册账号，设置应用，配置应用信息，得到key和security
        我们的html是通过js接口实现地图的
        开发手册：https://lbs.amap.com/api/javascript-api-v2/summary
        ArkWeb方式：可以绕过鸿蒙系统，通过html整合高德地图，不受语言和版本的影响
        key：	  e4fe7e7b7f2745f7bc1c74728adf2bf3
        security：a4693c4b60585a4892501f9b321b204f
-->

<!--第一步：定义呈现地图的容器-->
<div id="container"></div>

<!--第三步：设置全局变量-->
<script type="text/javascript">
    //将“安全密钥”设置到全局中，后面很多地图操作，默认都会自动去调用的
    //代码是固定的，不能修改
    //这里在当前window对象中，挂载了一个配置
    window._AMapSecurityConfig = {
        securityJsCode: '6969e074016af22cd5b3ab95cf3421b7'
    }
</script>

<!--第四步：加载官方离线脚本，附加申请的key-->
<script
        type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=b29fb3cda340769a01c193d4873edc09"
></script>

<!--第五步：自定义脚本开发-->
    <script type="text/javascript">

        //创建地图对象，初始化绑定('绑定的容器', {配置})
        var map = new AMap.Map(
            'container',                        //加载地图的网页元素的id
            {
                zoom: 25,                       //初始地图的缩放比例
                center: [121.475087, 31.237295] //初始地图的中心点[经度, 维度]
            }
        )

        //当页面正式加载完毕后
        window.onload = function() {
            //调用鸿蒙代理操作，获取且设置当前设备的经纬度
            window.swift.setCurrentLocation()
        }

        //设置地图定位中心点(经度, 维度)
        function setLocation(lng, lat) {

            //重新设置地图的中心点
            map.setZoomAndCenter(25, [lng, lat])

            //创建一个标记点，加入到地图中
            map.add(new AMap.Marker({
                map,                  //对应的地图对象
                position: [lng, lat], //标记点
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
            }))

            //为地图新增插件能力：搜索
            map.plugin(['AMap.PlaceSearch'], function(){
                //创建搜索功能对象，提供所有设置
                var MSearch = new AMap.PlaceSearch({
                    map,                //参照的地图对象
                    pageSize: 4,        //每页多少条
                    pageIndex: 1,       //当前第几页
                    extensions: 'base'  //结果-只要基本信息
                })

                //搜索之前，先为地图，设置监听
                //监听：搜索功能完成时
                AMap.Event.addListener(MSearch,'complete',(res)=>{
                    //调用鸿蒙应用方法，将搜索结果传回
                    window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois))
                })

                //执行搜索
                MSearch.searchNearBy('停车场', [lng, lat])
            })

        }

</script>
</body>
</html>